<template>
  <div>
    <div class="top">
      <el-popover
        popper-class="meeting-popover usercard-popover"
        trigger="click"
        :ref="`popover-${item.realName}`"
      >
        <el-card class="popover-card" shadow="never">
          <div slot="header">
            <span class="header-left">{{getGroupNameByItem(item)}}</span>
            <el-divider direction="vertical"></el-divider>
            <span
              v-if="item.myDutyName == '调度员'||item.myDutyName == '无职务'"
              class="header-right"
            >{{ $t('m.dict.dutyOption')[item.myDutyName] }}</span>
            <span v-else class="header-right">{{ item.myDutyName }}</span>
          </div>
          <div class="popover-card-body">
            <div class="body-item-tools">
              <!---- 电话列表 -->
              <div class="item-tools-left">
                <div
                  v-for="(device,index) in item.device"
                  :key="device.deviceTel"
                  :class="device.isCheck?'item-info-left-check':'item-info-left'"
                  @click="handleChangeDeviceType(item,index)"
                >{{ $t('m.dict.deviceTypeOptions')[device.deviceType] }}</div>
                <!-- <div
                  class="advanceClass"
                  v-if="item.device.length>1"
                  @click="handleAdvanceCall(item)"
                >
                  <img src="../../assets/images/ForceCall.png" style="width:50px;height:50px" />
                  <div>{{$t('m.STRONG_CALL')}}</div>
                </div>-->
              </div>
              <!------------------------- 语音调度状态栏目-------------------------------- -->
              <div class="item-tools-right">
                <div style="width:100%;height: 20px;">
                  <span style="float:left;margin-left:5%">{{ item.defaultNo }}</span>
                  <span style="float:right;margin-right:5%">
                    {{
                    item.deviceStatus &&
                    $t('m.dict.callStatusAll')[item.deviceStatus].text
                    ? $t('m.dict.callStatusAll')[item.deviceStatus].text
                    : '空闲'
                    }}
                  </span>
                </div>
                <div
                  class="tool-item"
                  @click=" handleMakeCall(item.defaultNo, item.realName, item,index)"
                  v-show="item.deviceStatus == 'idle'"
                >
                  <div class="icon-div">
                    <img src="../../assets/images/VoiceCall.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">{{$t('m.VOICE_CALL')}}</div>
                </div>
                <div
                  class="tool-item"
                  @click="handleMakeSelect('meetingCall', item)"
                  v-show="item.deviceStatus == 'broadcast' ||
                              item.deviceStatus == 'idle' ||
                              item.deviceStatus == 'talk' ||
                              item.deviceStatus == 'hold' ||
                              item.deviceStatus == 'queue'"
                >
                  <div class="icon-div">
                    <img src="../../assets/images/Meeting.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">{{$t('m.JOIN_THE_MEETING')}}</div>
                </div>
                <div
                  class="tool-item"
                  @click="handleClear(item.defaultNo, index,item)"
                  v-show=" item.deviceStatus == 'broadcast' ||
                              item.deviceStatus == 'talk' ||
                              item.deviceStatus == 'hold' ||
                              item.deviceStatus == 'allowspeak' ||
                              item.deviceStatus == 'banspeak' ||
                              item.deviceStatus == 'ready' ||
                              item.deviceStatus == 'ring' ||
                              item.deviceStatus == 'queue' "
                >
                  <div class="icon-div">
                    <svg-icon icon-class="scissor"></svg-icon>
                  </div>
                  <div class="tool-text">{{$t('m.CLEAR_CONNECTION')}}</div>
                </div>
                <div
                  class="tool-item"
                  @click="handleHoldCall(item)"
                  v-show="item.deviceStatus == 'broadcast' ||
                              item.deviceStatus == 'talk' ||
                              item.deviceStatus == 'hold'"
                >
                  <div class="icon-div">
                    <img src="../../assets/images/Holding.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">
                    {{
                    item.deviceStatus == 'talk'
                    ? $t('m.HOLD')
                    : $t('m.HOLD_OFF')
                    }}
                  </div>
                </div>
                <div
                  class="tool-item"
                  @click="handleSingleTransferCall(item, 'transfer', index)"
                  v-show="item.defaultNo != mainTel && item.deviceStatus == 'idle' "
                >
                  <div class="icon-div">
                    <img src="../../assets/images/Transfer.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">{{$t('m.CONSULTATION_CALL')}}</div>
                </div>
                <div
                  class="tool-item"
                  @click="handleSingleTransferCall(item, 'singleTransfer', index)"
                  v-show="  item.defaultNo != mainTel && item.deviceStatus == 'idle'"
                >
                  <div class="icon-div">
                    <img
                      src="../../assets/images/SingleTransfer.png"
                      style="width:50px;height:50px"
                    />
                  </div>
                  <div class="tool-text">{{$t('m.CALL_TRANSFER')}}</div>
                </div>
                <!-- 监听 -->
                <div
                  class="tool-item"
                  @click="handleForce(item, 'MonitorCall')"
                  v-show=" item.deviceStatus == 'monitorring' ||
                                item.deviceStatus == 'monitortalk' "
                >
                  <div class="icon-div">
                    <img src="../../assets/images/Monitor.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">{{$t('m.MONITOR')}}</div>
                </div>
                <!-- 强插 -->
                <div
                  class="tool-item"
                  @click="handleForce(item, 'ForceInsertCall')"
                  v-show=" item.deviceStatus == 'monitorring' ||
                              item.deviceStatus == 'monitortalk'  "
                >
                  <div class="icon-div">
                    <img src="../../assets/images/ForceInsert.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">{{$t('m.FORCE_INSERT')}}</div>
                </div>
                <!-- 强拆 -->
                <div
                  class="tool-item"
                  @click="handleForce(item, 'ForceReleaseCall')"
                  v-show=" item.deviceStatus == 'monitorring' ||
                              item.deviceStatus == 'monitortalk'"
                >
                  <div class="icon-div">
                    <img src="../../assets/images/ForceRelease.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">{{$t('m.FORCE_RELEASE')}}</div>
                </div>
                <!-- 强断 -->
                <div
                  class="tool-item"
                  @click="handleForce(item, 'ForceClearCall')"
                  v-show=" item.deviceStatus == 'monitorring' ||
                              item.deviceStatus == 'monitortalk'  "
                >
                  <div class="icon-div">
                    <img src="../../assets/images/ForceClear.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">{{$t('m.FORCE_CLEAR')}}</div>
                </div>
                <div
                  class="tool-item"
                  @click="handleMeetKick(item)"
                  v-show="  item.deviceStatus == 'allowspeak' ||
                                item.deviceStatus == 'banspeak' "
                >
                  <div class="icon-div">
                    <img src="../../assets/images/MeetKick.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">{{$t('m.TICK_MEETING')}}</div>
                </div>
                <!-- <div
                  class="tool-item"
                  @click="handleMeetAllowSpeak(item, 'ban')"
                  v-show="item.deviceStatus == 'allowspeak'"
                >
                  <div class="icon-div">
                    <img src="../../assets/images/BanSpeaks.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">{{$t('m.BAN_SPEAK')}}</div>
                </div>
                <div
                  class="tool-item"
                  @click="handleMeetAllowSpeak(item, 'allow')"
                  v-show="item.deviceStatus == 'banspeak'"
                >
                  <div class="icon-div">
                    <img src="../../assets/images/AllowSpeaks.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">{{$t('m.ALLOW_SPEAK')}}</div>
                </div>-->
                <div
                  class="tool-item"
                  @click="handleMeetSingleTalk(item)"
                  v-show="
                              item.deviceStatus == 'banspeak' ||
                                item.deviceStatus == 'allowspeak'
                            "
                >
                  <div class="icon-div">
                    <img src="../../assets/images/MeetSingle.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">{{$t('m.SINGER_TALK')}}</div>
                </div>
                <div
                  class="tool-item"
                  @click="handleMeetBack(item)"
                  v-show="item.deviceStatus == 'singletalk'"
                >
                  <div class="icon-div">
                    <img src="../../assets/images/Meeting.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">{{$t('m.BACK_MEETING')}}</div>
                </div>
                <div
                  class="tool-item"
                  @click="handlePickUp(item)"
                  v-show="item.deviceStatus == 'monitorring'"
                >
                  <div class="icon-div">
                    <img
                      src="../../assets/images/SemiduplexGroup.png"
                      style="width:50px;height:50px"
                    />
                  </div>
                  <div class="tool-text">{{$t('m.PICKUP')}}</div>
                </div>
                <!-- <div
                  class="tool-item"
                  @click="handleActivateStun(item, 'stun')"
                  v-show=" getTelTypeBytel(item.defaultNo) == 'Poc终端' && item.deviceStatus != 'offline'  "
                >
                  <div class="icon-div">
                    <img src="../../assets/images/LongClose.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">终端遥毙</div>
                </div>-->
                <!-- <div
                  class="tool-item"
                  @click="handleActivateStun(item, 'activate')"
                  v-show="getTelTypeBytel(item.defaultNo) == 'Poc终端' &&  item.deviceStatus == 'offline' "
                >
                  <div class="icon-div">
                    <img src="../../assets/images/LongClose.png" style="width:50px;height:50px" />
                  </div>
                  <div class="tool-text">终端激活</div>
                </div>-->
              </div>
            </div>
            <div class="body-item-footer">
              <a @click="employeeEdit(item)" style="cursor:pointer;">{{$t('m.EDIT')}}</a>
            </div>
          </div>
        </el-card>
        <img
          :src="item.deviceStatus == 'talk'?$t('m.dict.callStatusAll')[item.deviceStatus].pic :item.isCheck?$t('m.dict.callStatusAll')['choose'].pic : item.deviceStatus? $t('m.dict.callStatusAll')[item.deviceStatus].pic: $t('m.dict.callStatusAll').idle.pic  "
          slot="reference"
        />
      </el-popover>
      <div class="txt" @click="handleMakeCall(item.defaultNo, item.realName, item,index)">
        <div>{{ item.realName }}</div>
        <div
          class="dutyAndAgent"
          v-if="item.agentState && item.agentState == 'logout'"
        >{{$t('m.LOGOUT')}}</div>
        <div class="dutyAndAgent" v-if="item.dutyName && item.dutyName != ''">
          <marqueeXX :send-val="item.dutyName[0]" />
        </div>
      </div>
    </div>
    <div v-if="item.deviceStatus && cardType=='normal'" class="bottom">
      <img
        class="myVideo"
        v-show="item.obj.videoID.length > 0"
        src="../../assets/images/VideoMeet_Hover.png"
      />
      {{
      item.deviceStatus && $t('m.dict.callStatus')[item.deviceStatus].text
      ? $t('m.dict.callStatus')[item.deviceStatus].text
      : ''
      }}
    </div>
    <div v-if="item.deviceStatus && cardType=='title'" class="bottom">
      {{
      item.callStatusName
      ? item.callStatusName
      : $t('m.dict.callStatus')[item.deviceStatus].text
      }}
    </div>
    <!-- 职员窗口 -->
    <employee-form
      v-if="openEmployeeForm"
      :title="employeeFormTitle"
      :open.sync="openEmployeeForm"
      :formData="employeeForm"
    ></employee-form>
    <!-- 操作员窗口 -->
    <operator-form
      v-if="openOperatorForm"
      :title="employeeFormTitle"
      :open.sync="openOperatorForm"
      :formData="employeeForm"
    ></operator-form>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
import EmployeeForm from './../Gis/EmployeeForm'
import OperatorForm from './../Gis/OperatorForm'
import deepClone from '@/utils/clone'
import marqueeXX from './marqueeXX'
export default {
  props: {
    item: Object,
    selectTransactionShow: Boolean,
    index: Number,
    isBroadbandFlag: Boolean,
    cardType: String,
    currentTalkObj: Object,
  },
  components: {
    OperatorForm,
    EmployeeForm,
    marqueeXX,
  },
  data() {
    return {
      employeeForm: null, // 职员表单
      openEmployeeForm: false, // 打开职员窗口
      employeeFormTitle: '', // 窗口标题
      openOperatorForm: false,
    }
  },
  computed: mapState({
    mainTel: (state) => state.cache.operatorInfo.mainTel,
    deviceStatusMap: (state) => state.cache.deviceStatusMap,
    groupMap: (state) => state.cache.groupMap,
    telOperatorMap: (state) => state.cache.telOperatorMap,
    telEmployeeMap: (state) => state.cache.telEmployeeMap,
  }),
  methods: {
    inits() {
      this.tableData = JSON.parse(sessionStorage.getItem('menuList'))
    },
    //组名
    getGroupNameByItem(item) {
      if (item.group == null || item.group == undefined) {
        return ''
      }
      const groupId = item.group[0].groupID
      let group = this.groupMap.get(groupId)
      let groupName = ''
      if (group) {
        groupName = group.label
      }
      return groupName
    },
    //用户手机号类型转换
    getTelType(type) {
      let typeName = ''
      if (type == 'office' || type == 'Office') {
        typeName = '办公号码'
      } else if (type == 'Home') {
        typeName = '家庭号码'
      } else if (type == 'Mobile') {
        typeName = '移动号码'
      } else if (type == 'Fax') {
        typeName = '传真号码'
      } else if (type == 'Linkage') {
        typeName = '联动号码'
      } else if (type == 'Wireless' || type == 'wireless') {
        typeName = '无线终端'
      } else if (type == 'pocgroup') {
        typeName = 'POC群组'
      } else if (type == 'poc') {
        typeName = 'Poc终端'
      } else if (type == 'soldier') {
        typeName = '单兵终端'
      } else if (type == 'Video') {
        typeName = '视频终端'
      } else if (type == 'phone') {
        typeName = '话机'
      } else if (type == 'hand_microphone') {
        typeName = '手咪'
      } else {
        typeName = '手咪'
      }
      return typeName
    },
    //切换选中号码以及样式
    handleChangeDeviceType(item, index) {
      let _this = this
      item.device.forEach((e, i) => {
        e.isCheck = false
        if (index == i) {
          e.isCheck = true
          item.defaultNo = e.deviceTel
          item.deviceStatus = 'idle'
          let deviceStatus = _this.deviceStatusMap.get(e.deviceTel)
          if (deviceStatus) {
            item.deviceStatus = deviceStatus
          }
        }
      })
    },
    //通过手机号获得号码类型
    getTelTypeBytel(tel) {
      let telType = ''
      this.item.device.forEach((e) => {
        if (e.deviceTel == tel) {
          telType = this.getTelType(e.deviceType)
        }
      })
      return telType
    },
    getGroupName(id) {
      let name = this.groupMap.get(id)
      return name ? name : ''
    },
    //职员编辑
    employeeEdit(item) {
      this.hidePopper(item)
      if (item.myDutyName == '调度员') {
        this.openOperatorForm = true
        this.employeeFormTitle = '操作员详情'
        let operator = this.telOperatorMap.get(item.defaultNo)
        if (operator == undefined || operator == null) {
          operator = this.telOperatorMap.get(item.device[0].deviceTel)
        }
        this.employeeForm = deepClone(operator)
      } else {
        this.employeeFormTitle = '职员详情'
        this.employeeForm = deepClone(item)
        this.openEmployeeForm = true
      }
    },
    //会议
    handleMakeSelect(type, item) {
      this.hidePopper(item)
      this.$emit('handleMakeSelect', type, item)
    },
    //强呼
    handleAdvanceCall(item) {
      this.hidePopper(item)
      this.$emit('handleAdvanceCall', item)
    },
    //语音呼叫
    handleMakeCall(defaultNo, realName, item, index) {
      if (this.isBroadbandFlag) {
        //宽带集群页面不调用点击卡片语音呼叫
        return
      }
      this.hidePopper(item)
      this.$emit('handleMakeCall', defaultNo, realName, item, index)
    },
    //视频呼叫
    handleMakeCallVideo(defaultNo, realName, index, item) {
      this.hidePopper(item)
      this.$emit('handleMakeCallVideo', defaultNo, realName, index, item)
    },
    //拆线
    handleClear(defaultNo, index, item) {
      this.hidePopper(item)
      this.$emit('handleClear', defaultNo, index)
    },
    //呼叫保持，解除
    handleHoldCall(item) {
      this.hidePopper(item)
      this.$emit('handleHoldCall', item)
    },
    //转接/转接
    handleSingleTransferCall(item, type, index) {
      if (
        this.currentTalkObj.deviceTel == '' ||
        this.currentTalkObj.deviceTel == undefined
      ) {
        return this.$message.error('没有正在进行中的通话！')
      }
      this.$store.commit('callFlagEvent', true) // vuex缓存
      this.hidePopper(item)
      // this.$emit('handleSingleTransferCall', item, type, index)
      if (type == 'singleTransfer') {
        let form = {
          activeDevice: this.currentTalkObj.deviceTel,
          calledDevice: item.defaultNo,
        }
        SDK.singleTransferCall(form)
      } else if (type == 'transfer') {
        let form = {
          callingDevice: this.mainTel,
          activeDevice: this.currentTalkObj.deviceTel,
          calledDevice: item.defaultNo,
          callType: 'audio',
        }
        SDK.consultCall(form)
      }
    },
    //录音
    handleRecordCall(item, index, type) {
      this.hidePopper(item)
      this.$emit('handleRecordCall', item, index, type)
    },
    //监测
    handleForce(item, type) {
      this.hidePopper(item)
      this.$emit('handleForce', item, type)
    },
    //摇臂，激活
    handleActivateStun(item, type) {
      this.hidePopper(item)
      this.$emit('handleActivateStun', item, type)
    },
    //选中
    handleGetItemforTranscation(item, index) {
      this.hidePopper(item)
      this.$emit('handleGetItemforTranscation', item, index)
    },
    //回到会议
    handleMeetBack(item) {
      this.hidePopper(item)
      this.$emit('handleMeetBack', item)
    },
    //单独通话
    handleMeetSingleTalk(item) {
      this.hidePopper(item)
      this.$emit('handleMeetSingleTalk', item)
    },
    //发言
    handleMeetAllowSpeak(item, type) {
      this.hidePopper(item)
      this.$emit('handleMeetAllowSpeak', item, type)
    },
    //踢出会议
    handleMeetKick(item) {
      this.hidePopper(item)
      this.$emit('handleMeetKick', item)
    },
    //对讲组呼
    handleMakeCallHalf(defaultNo, realName, item, index) {
      this.hidePopper(item)
      this.$emit('handleMakeCall', defaultNo, realName, index)
    },
    //宽带选中
    handelChoose(item, index) {
      this.hidePopper(item)
      this.$emit('handelChoose', item, index)
    },
    //分机代答
    handlePickUp(item) {
      this.hidePopper(item)
      let tel = '*11*' + item.defaultNo + '#'
      this.$emit('singleMakeCall', tel)
    },
    // 隐藏成员工具栏
    hidePopper(item) {
      this.$refs[`popover-${item.realName}`].showPopper
      this.$refs[`popover-${item.realName}`].showPopper = false
    },
  },
  mounted() {
    this.inits()
  },
  watch: {
    item: {
      handler(newValue, oldValue) {
        // console.log(newValue)
        // this.item = newValue
      },
      deep: true,
    },
  },
}
</script>

<style lang="scss">
.usercard-popover {
  height: 200px;
  z-index: 10000 !important;
}
</style>
<style lang="scss" scoped>
.advanceClass {
  width: 50px;
  text-align: center;
  margin: 0 10px;
  height: 60px;
  position: absolute;
  bottom: 30px;
  left: 15px;
}
.top {
  display: flex;
}
.top img {
  width: 70px;
  height: 70px;
  border-top-left-radius: 10%;
}
.top .txt {
  font-size: 12px;
  width: 136px;
  text-align: center;
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.top .txt div {
  font-size: 20px;
  color: black;
  width: 95px;
}
.dutyAndAgent {
  font-size: 17px !important;
}
.bottom {
  border-top: 1px solid #dadada;
  text-align: center;
  .myVideo {
    width: 20px;
    margin-left: 10px;
    float: left;
  }
}
@media screen and (max-width: 1024px) {
  .top img {
    width: 47px;
    height: 47px;
  }
  .top .txt {
    height: 47px;
  }
  .top .txt div {
    font-size: 13px;
    width: 45px;
  }
  .bottom {
    font-size: 10px;
    .myVideo {
      width: 15px;
    }
  }
  .dutyAndAgent {
    font-size: 10px !important;
  }
}
@media screen and (max-width: 1440px) and (min-width: 1024px) {
  .top img {
    width: 65px;
    height: 65px;
  }
  .top .txt {
    height: 66px;
  }
  .top .txt div {
    font-size: 16px;
    width: 76px;
  }
  .bottom {
    font-size: 10px;
  }
  .dutyAndAgent {
    font-size: 13px !important;
  }
}
</style>